<template>
	<view class="content">
		<view class="navBox paddingContent">
			<view @click="$TOOL.backPageRefresh()">
				<cicon name="return" :size="46"></cicon>
			</view>
			<view>
				查看歌词
			</view>
			<view></view> 
		</view>
		
		
		
		 
		<view class="loading" v-if="isRequest">
			<view><cicon name="loading" :size="34"></cicon></view>
			努力加载中 ..
		</view>
		<template v-else>
			<view class="lyricBox paddingContent" v-if="lyricData.length>0">
				<template v-for="lyr in lyricData">
					<view v-if="lyr.text">
						{{lyr.text}}
					</view>
				</template>
			</view>
			<view v-else class="noLyric paddingContent">
				暂时没有歌词 ..
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				id:null,
				title:null,
				artist:null,
				lyricData:[],
				isRequest:true
			};
		},
		onLoad(options) {
			this.id = options.id
			this.title = options.title
			this.artist = options.artist
			
			this.get_lyric()
		},
		methods:{

			get_lyric(){
				let lyrics
				this.$API.get_lyric.request({
					_sid:this.$TOOL.getSid(),
					id:this.id
				}).then((e)=>{
					 
					if(e.data.lyrics===''){
						this.$API.search_lyric.request({
							_sid:this.$TOOL.getSid(),
							title: this.title,
							artist: this.artist,
							limit: 1
						}).then((e2)=>{
							if(e2.data){
								lyrics = e2.data.lyrics[0].additional.full_lyrics
								this.lyricData= this.$TOOL.formatLyric(lyrics)
							}
							this.isRequest = false
						})
					}else{
						lyrics = e.data.lyrics
						this.lyricData= this.$TOOL.formatLyric(lyrics)
						this.isRequest = false
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	
	.noLyric{
		padding-top: 40rpx;
		opacity: 0.6;
		font-size: 26rpx;
	}
	.lyricBox{
		height: calc( 100vh - 220rpx);
		padding-top: 40rpx; 
		overflow-y: auto;
		>view{
			font-size: 28rpx;
			opacity: 0.7;
			padding: 10rpx 0;
		}
	}
	
	
	
</style>
